import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import { filterImage } from "../App";

const FriendStyleModal = ({ open, onClose, friendStyles, onSelectStyle }) => {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredStyles = friendStyles.filter((style) =>
    style.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>Select Friend Style</DialogTitle>
      <DialogContent>
        <TextField
          label="Search styles"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          fullWidth
          margin="normal"
        />
        <Grid container spacing={2}>
          {filteredStyles.map((style) => (
            <Grid item key={style.id} xs={12} sm={6} md={4}>
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  cursor: "pointer",
                }}
                onClick={() => onSelectStyle(style)}
              >
                <Box
                  component="img"
                  src={filterImage(style.head, 100)}
                  alt={style.name}
                  sx={{
                    width: 100,
                    height: 100,
                    objectFit: "cover",
                    borderRadius: "50%",
                    mb: 1,
                  }}
                />
                <Typography variant="subtitle1">{style.name}</Typography>
              </Box>
            </Grid>
          ))}
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
      </DialogActions>
    </Dialog>
  );
};

export default FriendStyleModal;
